<template>
  <container>
    <!-- 类似于img标签 -->
    <!-- <sprite :texture="enermyImg" v-for="(enermy, index) in enermyPlanes" :key="index" :x="enermy.x" :y="enermy.y"></sprite> -->
    <sprite :texture="enermyImg"></sprite>
  </container>
</template>

<script>
import enermyImg from '@/assets/enemy.png'
import { reactive, onMounted, onUnmounted } from 'vue'
import { game } from '@/game/index.js'

export default {
  setup() {
    const enermyPlanes = reactive([
      {
        x: 100,
        y: 20,
        width: 308,
        height: 207
      },
      {
        x: 200,
        y: 100,
        width: 308,
        height: 207
      }
    ])

    // const move = () => {
    //   enermyPlanes.forEach(enermy => {
    //     enermy.y++
    //   })
    // }

    // onMounted(() => {
    //   game.ticker.add(move)
    // })

    // onUnmounted(() => {
    //   game.ticker.remove(move)
    // })

    return {
      enermyImg,
      enermyPlanes
    }
  }
}

export function useEnermyPlane() {
  const enermyPlanes = reactive([
    {
      x: 100,
      y: 20,
      width: 308,
      height: 207
    },
    {
      x: 200,
      y: 100,
      width: 308,
      height: 207
    }
  ])

  return {
    enermyPlanes
  }
}
</script>
